<template>
	<view class="content" v-if="pageShow">
		<!-- 頭部 -->
		<view class="header" :style="{backgroundImage: `url(${shopInfo.topimages_arr[0]})`}">
			<!-- 遮罩层 -->
			<view class="blackBox"></view>
			<!-- 按钮 -->
			<view class="btnBox flexbetween">
				<view class="flexleft">
					<view class="margin_right1" @click="goBack">
						<u-icon name="arrow-left" color="#ffffff" size="24"></u-icon>
					</view>
				</view>
				<view class="flexleft">
					<view @click="collectshop()">
						<u-icon class="margin_right2" v-if="shopInfo.is_user_collect==0" name="star" color="#ffffff"
							size="24"></u-icon>
						<u-icon class="margin_right2" v-else name="star-fill" color="#ffa126" size="24"></u-icon>
					</view>
					<!-- <view @click="goSearch">
						<u-icon class="margin_right2" name="search" color="#ffffff" size="24"></u-icon>
					</view> -->
					<view @click="sharemsg">
						<u-icon name="share" color="#ffffff" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 店鋪 -->
		<view class="shopBox">
			<view class="flexbetween">
				<view>
					<view class="shopName">{{shopInfo.name}}</view>

				</view>
				<image class="shopImg" :src="shopInfo.logoimage" mode=""></image>
			</view>
			<!-- tab栏 -->

		</view>
		<u-sticky bgColor="#fafafa" customNavHeight="0">
			<view class="mainpadding2">
				<view class="flexbetween ffffff" style="margin-left: -20rpx;">
					<u-tabs :list="tabList" @click="change" lineWidth="50rpx" lineColor="#FFB800"
						:activeStyle="{color: '#000000',fontWeight: 800,transform: 'scale(1.05)'}"
						:inactiveStyle="{color: '#666666',transform: 'scale(1)'}"></u-tabs>
					<view class="flexleft">
						<view class="chat">領券</view>
					</view>
				</view>
				<view class="margin_top flexbetween">
					<view class="flexleft">
						<view :class="current==3?'color_ling text_a':'color_six text_a'">分類篩選
						</view>
						<view class="screen" style="margin-left: 5rpx;"></view>
					</view>
					<view :class="current==0?'color_ling text_a':'color_six text_a'">
						綜合排序
					</view>
					<view class="flexleft">
						<view :class="current==1?'color_ling text_a':'color_six text_a'">銷量排序
						</view>
						<view>
							<view :class="type==2?'arrow_top_active':'arrow_top'"></view>
							<view :class="type==1?'arrow_bottom_active':'arrow_bottom'"></view>
						</view>
					</view>
					<view class="flexleft">
						<view :class="current==2?'color_ling text_a':'color_six text_a'">價格排序
						</view>
						<view>
							<view :class="type==4?'arrow_top_active':'arrow_top'"></view>
							<view :class="type==3?'arrow_bottom_active':'arrow_bottom'"></view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 商家 -->
		<view class="margin_top mainpadding ffffff" v-if="tabActive==2">
			<view class="flexleft">
				<image class="shopInfoImg" src="/static/images/index/address.png" mode=""></image>
				<view class="color_san text_five">{{shopInfo.address}}</view>
			</view>
			<view class="flexleft flex_wrap padding_bottom border_bottom">
				<view class="evalImg margin_top" v-for="(item,index) in shopInfo.inimages_arr" :key="index">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<view class="flexbetween margin_top padding_bottom border_bottom">
				<view class="flex">
					<image class="shopInfoImg" src="/static/images/index/phone.png" mode=""></image>
					<view class="color_san text_five">{{shopInfo.shopmbl}}</view>
				</view>
				<view class="flexleft">
					<view class="margin_right4 text" @click.stop="daohang(shopInfo.address)">
						<image class="shopPhone" src="/static/images/index/navigation.png" mode=""></image>
						<view class="text_pee color_san">導航</view>
					</view>
					<view class="margin_right4 text" @click.stop="phone(shopInfo.shopmbl)">
						<image class="shopPhone" src="/static/images/index/phoneShop.png" mode=""></image>
						<view class="text_pee color_san">電話</view>
					</view>
				</view>
			</view>
			<view class="flexleft margin_top">
				<image class="shopInfoImg" src="/static/images/index/time.png" mode=""></image>
				<view class="color_san text_five">營業時間</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.motime">
				<view class="">周一：</view>
				<view class="margin_right1" v-for="item in shopInfo.motime.split(',')" :key="item">{{item}}</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.tutime">
				<view class="">周二：</view>
				<view class="margin_right1" v-for="item in shopInfo.tutime.split(',')" :key="item">{{item}}</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.wetime">
				<view class="">周三：</view>
				<view class="margin_right1" v-for="item in shopInfo.wetime.split(',')" :key="item">{{item}}</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.thtime">
				<view class="">周四：</view>
				<view class="margin_right1" v-for="item in shopInfo.thtime.split(',')" :key="item">{{item}}</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.frtime">
				<view class="">周五：</view>
				<view class="margin_right1" v-for="item in shopInfo.frtime.split(',')" :key="item">{{item}}</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.satime">
				<view class="">周六：</view>
				<view class="margin_right1" v-for="item in shopInfo.satime.split(',')" :key="item">{{item}}</view>
			</view>
			<view class="flexleft flex-wrap color_san margin_top text_five" v-if="shopInfo.sutime">
				<view class="">周日：</view>
				<view class="margin_right1" v-for="item in shopInfo.sutime.split(',')" :key="item">{{item}}</view>
			</view>
		</view>
		<view class="footerBox" v-show="tabActive==0">
			<view class="footerPirce flexbetween">
				<view class="flexleft paddingtb padding_left3">
					<view class="cart margin_right3">
						<view class="num">0</view>
					</view>
					<view class="line_r margin_right2"></view>
					<view>
						<text class="color_ling text_d">合計：</text>
						<text class="totalPrice">$</text>
						<text class="totalPrice" style="font-size: 36rpx;">0</text>
					</view>
				</view>
				<view class="settlement">結帳</view>
			</view>
		</view>
		<template v-if="hongbao">
			<liu-drag-button @clickBtn="shareShop(shopInfo)">
				<view class="flexcolumn dingwei">
					<image src="@/static/images/index/hongbao.png" style="width: 140rpx;height: 140rpx;"mode="">
					</image>
					<image src="/static/images/index/deletetwo.png" @click.stop="hongbao=false" style="width: 50rpx;height: 50rpx;position: absolute;top: 0;right: -10rpx;" mode=""></image>
					<view style="color:#fff;padding: 5rpx 10rpx;background-color: #333;border-radius: 20rpx;font-size: 26rpx;">分享領現金</view>
				</view>
			</liu-drag-button>
		</template>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				type: 0, //排序類型默認0，1=銷量降，2-=銷量升，3=價格降 4=價格升
				tabActive: 0,
				tabList: [{
					name: "商品"
				}, {
					name: "評價"
				}, {
					name: "商家"
				}, {
					name: "票券"
				}],
				count: 5,
				value: 5,
				ticketsType: 0, //票券類型 0電影票 1演唱會 2店家券
				shop_id: "", //店鋪id
				shopInfo: {}, //店鋪詳情
				shopclassify_id: "", //分類id
				list: {
					data: []
				}, //商品列表
				pageShow: false,
				name: "", //關键词
				total_price: 0, //購物車總金額
				total: 0, //購物車總數量
				page: 1,
				limit: 12,
				pagedown: true,
				hongbao:true
			}
		},
		onLoad(options) {
			if(options.invite_code){
				uni.setStorageSync("other_invite_code",options.invite_code)
			}
			this.shop_id = options.id
			this.getInfo()
		},
		methods: {
			shareShop(item) {
				let that = this
				let url = "https://opos.tw/pages_index/shopInfogoogle?id="
				if (item.is_goole != 1) {
					url = "https://opos.tw/pages_index/shopInfo?id="
				}
				if (navigator.share) {
					navigator.share({
							title: item.fy_share_title,
							text: item.fy_share_title,
							url: window.location.href + '&invite_code=' + uni.getStorageSync(
								"invite_code"), // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			connection() {
				if (this.shopInfo.user_id == uni.getStorageSync('user_id')) {
					httpRequest.toast("自己不能和自己聊天哦！");
					return false
				}
				let that = this
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				httpRequest.request('/api/user/addFriends', 'GET', {
					firend_id: this.shopInfo.user_id,
					sendtype: 1,
					user_id: uni.getStorageSync('user_id')
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: this.shopInfo.user_id,
						friend_name: this.shopInfo.name,
						firend_avatar_text: this.shopInfo.logoimage
					}
					uni.navigateTo({
						url: "/pages_message/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //獲取当前頁面的轮播圖數据
				//uniapp预览轮播圖
				uni.previewImage({
					current: index, //预览圖片的下标
					urls: i //预览圖片的地址，必须要數组形式，如果不是數组形式就转換成數组形式就可以
				})
			},

			scancode() {
				uni.navigateTo({
					url: "/pages_index/saomajg?id=" + this.shop_id
				})
			},
			collectshop() { //收藏店鋪
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.http.request('/api/shop/addcollect', 'POST', {
					shop_id: this.shop_id
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("操作成功")
						this.getInfo(1)
					} else {
						this.http.toast(res.msg)
					}
				})
			},
			async getInfo(val) { //商家詳情
				let _this = this
				let res = await this.http.request('/api/shop/shop', 'POST', {
					shop_id: this.shop_id
				})
				if (res.code == 1) {
					let topimages_arr = []
					let inimages_arr = []
					let info = res.data
					info.logoimage = info.logoimage
					if (info.topimages) {
						info.topimages.split(",").forEach(item => {
							topimages_arr.push(item)
						})
					}
					if (info.inimages) {
						info.inimages.split(",").forEach(item => {
							inimages_arr.push(item)
						})
					}
					this.$set(info, "topimages_arr", topimages_arr)
					this.$set(info, "inimages_arr", inimages_arr)
					if (info.shop_class && info.shop_class.length) {
						info.shop_class.forEach(item => {
							this.$set(item, "isChecked", false)
						})
						info.shop_class[0].isChecked = true
						this.shopclassify_id = info.shop_class[0].id + ','
					}
					if (val != 1) {
						this.getGoodsList()
					}
					this.shopInfo = info
					this.pageShow = true
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			sharemsg() {
				let that = this
				if (navigator.share) {
					navigator.share({
							title: that.shopInfo.shop_share_title,
							text: that.shopInfo.shop_share_title,
							url: window.location.href + '&invite_code=' + uni.getStorageSync(
							"invite_code"), // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			async getGoodsList(isPage, page) { //商品列表
				let _this = this
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let shopclassify_id = this.shopclassify_id == "" ? [] : this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length == 0 ? "" : shopclassify_id[shopclassify_id.length - 1] ==
					"" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				let res = await this.http.request('/api/shop/listGoods', 'POST', {
					page: page || 1,
					limit: _this.limit,
					shop_id: this.shop_id,
					shopclassify_id: category_id,
					type: this.type, //排序類型默認0，1=銷量降，2-=銷量升，3=價格降 4=價格升
					name: this.name,
				})
				uni.hideLoading()
				if (res.code == 1) {
					res.data.data.forEach(item => {
						if (item.logoimage) {
							item.logoimage = this.imgUrl + item.logoimage
						}
					})
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						_this.list.data = resList.data;
					}
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.goodsList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getGoodsList(true, page);
			},
			change(e) {
				console.log(e)
				this.tabActive = e.index
			},
			goPhoneService() { //呼叫服務
				uni.navigateTo({
					url: "./phoneService"
				})
			},
			goReservation() { //預約排隊
				uni.navigateTo({
					url: "./reservation"
				})
			},
			screenGoods() { //商品分類篩選
				this.current = 3
				this.type = 0
				uni.navigateTo({
					url: "/pages_index/classifyScreen?id=" + this.shop_id
				})
			},
			selectCom() { //商品綜合排序
				this.current = 0
				this.type = 0
				this.getGoodsList()
			},
			selectSale() { //商品銷量排序
				this.current = 1
				this.type = this.type == 1 ? 2 : 1
				this.getGoodsList()
			},
			selectPrice() { //商品價格排序
				this.current = 2
				this.type = this.type == 3 ? 4 : 3
				this.getGoodsList()
			},
			selectCate(value) { //商品選擇分類
				this.shopInfo.shop_class.forEach(item => {
					item.isChecked = false
				})
				value.isChecked = true
				this.shopclassify_id = value.id + ','
				this.getGoodsList()
			},
			selectabzh() { //綜合
				this.current = 0
				this.type = 0
			},
			selectab() { //銷量
				this.current = 1
				this.type = this.type == 0 ? 1 : this.type == 1 ? 2 : 1
				this.type == 0 ? this.sellnum = "" : this.sellnum = this.type
			},
			selectabprice() { //價格
				this.current = 2
				this.type = this.type != 3 ? 3 : 4
			},
			screen() { //距離
				this.current = 3
				this.type = 0
			},
			goGoodsInfo(id) { //商品詳情
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: "/pages_index/goodsInfo?id=" + id
				})
			},
			goBack() {
				uni.navigateBack(1)
			},
			// goSearch() { //搜索
			// 	uni.navigateTo({
			// 		url: "./search"
			// 	})
			// },
			goTicketsType(type) { //電影票、演唱會、店家券
				let url = ""
				if (type == 0) {
					url = "./ticketInfo"
				} else if (type == 1) {
					url = "./vocalInfo"
				} else {
					url = "./shopTicket"
				}
				uni.navigateTo({
					url: url
				})
			},
			lingquan() { //領券
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: "/pages_index/lingquan?id=" + this.shop_id
				})
			},
			goCart() { //購物車
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: "./cart"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	// 頭部
	.header {
		height: 360rpx;
		// background-image: url("@/static/swiper.png");
		// background-size: 100% 100%;
		background-size: cover;
		background-position: center;
		position: relative;

		.blackBox {
			width: 100%;
			height: 360rpx;
			background-color: rgba(0, 0, 0, 0.2);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
		}

		.btnBox {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 50rpx;
			z-index: 100;
		}

		.searchBox {
			// height: 50rpx;
			background: #FFFFFF;
			border-radius: 65rpx 65rpx 65rpx 65rpx;
			border: 1rpx solid #FFFFFF;
			padding: 8rpx;
			box-sizing: border-box;
		}
	}

	// 店鋪
	.shopBox {
		background: #FFFFFF;
		// border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 30rpx 30rpx 30rpx;

		.shopName {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #333333;
		}

		.call {
			width: 191rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			background: rgba(255, 133, 5, 0.1);
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			border: 2rpx solid #FF8505;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF8505;
		}

		.reservation {
			width: 191rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			background: #FF8505;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			border: 2rpx solid #FF8505;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.shopImg {
			width: 164rpx;
			min-width: 164rpx;
			height: 164rpx;
			background: #D9D9D9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}


	}

	.scan {
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.chat {
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: #FFC400;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	// 分類篩選
	.cateNoSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		line-height: 53rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.cateSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		text-align: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF5C00;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	// 商品列表
	.goodsBox {
		width: 330rpx;
		border-radius: 11rpx 11rpx 0 0;

		.goodsImg {
			width: 330rpx;
			height: 330rpx;
			border-radius: 11rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.price {
			font-size: 24rpx;
			font-family: DIN Next LT Pro-Medium, DIN Next LT Pro;
			font-weight: 500;
			color: #FF0000;
		}
	}

	.ticketImg {
		width: 164rpx;
		height: 228rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ticketPrice {
		font-size: 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	// 評價
	.evalHead {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
	}

	.evalImg {
		width: 25%;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;

		image {
			width: 152rpx;
			height: 152rpx;
		}
	}

	.shopInfoImg {
		width: 38rpx;
		height: 38rpx;
	}

	// 底部
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 40rpx;

		.footerPirce {
			width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}

		.cart {
			width: 40.5rpx;
			height: 42.58rpx;
			background-image: url("@/static/images/index/cart_num.png");
			background-size: 100% 100%;
			position: relative;
		}

		.num {
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			background: #FF5C00;
			border-radius: 50%;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			font-size: 17rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.line_r {
			width: 0;
			height: 42rpx;
			border-right: 2rpx dashed rgba(0, 0, 0, 1);
		}

		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}

		.settlement {
			width: 178rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.shopPhone {
		width: 52rpx;
		min-width: 52rpx;
		height: 52rpx;
	}

	.kefuImg {
		width: 86rpx;
		min-width: 86rpx;
		height: 86rpx;
		position: fixed;
		right: 0;
		top: 80%;
	}
</style>